
<script>
  import { Bar,Line,Radar } from 'vue-chartjs'

  export default {
    extends: Line,
    props: {
        required: false,
        date: {
            default: function () {
                return new Date()
            }

        },
        line: {
          default (){
            return {
              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
              datasets: [
                {
                  label: 'GitHub Commits',
                  backgroundColor: '#ffffff',
                  borderColor:'blue',
                  data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
                }
              ]
            }
          }
        },
        option: {
            default () {
                return {
                    type: 'min',
                    SundayFirst: false,
                    // week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
                    week: ['一', '二', '三', '四', '五', '六', '日'],
                    // month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                    month: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    format: 'YYYY-MM-DD HH:mm',
                    color: {
                        checked: '#F50057',
                        header: '#3f51b5',
                        headerText: '#fff'
                    },
                    wrapperClass: '',
                    inputClass: '',
                    inputStyle: {
                        'display': 'inline-block',
                        'padding': '0',
                        'line-height': '22px',
                        'font-size': '14px',
                        'border': 'none',
                        'text-align': 'right',
                        'color': '#5F5F5F'
                    },
                    placeholder: '请选择',
                    buttons: {
                        ok: '确定',
                        cancel: '取消'
                    },
                    overlayOpacity: 0.5,
                    dismissible: true
                }
            }
        },
        param:{
            default(){
                return {
                    type:'min',
                    format: 'YYYY-MM-DD HH:mm'
                }
            }
        }
    },
    // mixins:[Bar, Line, Radar],
    data: function () {
      return {
        bar: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
            datasets: [
              {
                label: 'GitHub Commits',
                backgroundColor: '#f87979',
                data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
              }
            ]
        },
        // line: {
        //     labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
        //     datasets: [
        //       {
        //         label: 'GitHub Commits',
        //         backgroundColor: '#f87979',
        //         data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
        //       }
        //     ]
        // },
        // 混合式类型 ,extends 设置为 bar, 数据中特别修改type为line;
        mixed: {
          datasets: [{
            label: 'Bar Dataset',
            backgroundColor: '#f87979',
            data: [10, 20, 30, 40]
            }, {
              label: 'Line Dataset',
              data: [50, 30, 50, 60],
              backgroundColor: '#a87979',
              // Changes this dataset to become a line
              type: 'line'
            }],
          labels: ['January', 'February', 'March', 'April']
        },
        // Radar 雷达图
        radar: {
          labels: ['Running', 'Swimming', 'Eating', 'Cycling','a','b'],
          datasets: [{
              label: 'A',
              data: [20, 10, 4, 2,30,90]
          },
          {
              label: 'B',
              backgroundColor: '#a87979',
              data: [60,25,39,50,20]
          }]
        }
      }
    },
    mounted () {
      this.renderChart(this.line)
    
    }
  }
</script>